<template>
  <el-container class="layout">
      
    <el-header class="layout-header">
        <div>前端训练营</div>
        <div class="collapse-btn" @click="handleCollapse">
            <i v-if="!isCollapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
    </el-header>

    <el-container>
        <el-menu 
             router
            :collapse="isCollapse"
            class="el-menu-vertical-demo">
            <el-submenu index="/homework/convert64">
                <template #title>
                    <i class="el-icon-message"></i>
                    <span>作业</span>
                </template>
                <el-menu-item index="/homework/convert64" >64进制转换</el-menu-item>
                <el-menu-item index="/homework/findk" >数组中第 K 大的元素</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template #title>
                    <i class="el-icon-setting"></i>
                    <span>练习</span>
                </template>
                
            </el-submenu>
        </el-menu>
           

        <el-container>
            <el-main>
                <router-view> </router-view>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>

  </el-container>

</template>
<script>
export default {
    name: "Layout",
    data() {
        return {
            isCollapse: false,
        }
    },
    methods: {
        handleCollapse() {
            this.isCollapse = !this.isCollapse
        }
    }
}
</script>

<style scoped>
.layout {
    height: 100vh;
}
.layout-header {
    display: flex;
    width: 100%;
    font-size: 22px;
    align-items: center;
    color: #fff;
    background-color: #001529;
}
.layout-menu {
      background-color:#545c64;
      text-color:#fff;
      active-text-color:#ffd04b;
}

</style>